<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/normalreset.css">
	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> --><!-- 加这个会严重拖慢加载速度，主要是因为外国网站不给力 -->
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	<!-- 引入FontAwesome -->
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="js/jquery.min.js"></script>	<!-- 引入jquery -->
	<script src="js/main.js"></script>	<!-- main.js -->
	<!-- <script type="text/javascript" res="http://ip.chinaz.com/getip.aspx"></script> -->
	
	<title>my flat-style blog.</title>
</head>
<body>
	<div class="main-wrapper">
		<header>
			<!-- <bgsound  src="res/Pianoboy-Annabelle.mp3" autostart="true" loop="true"/> -->
			<nav>
				<div class="logo">Shi`Blog</div>
				<ul>
					<li id="home-page" class="active" onclick="navSwitch('#home-page')">主页</li>
					<li id="liuyan-page" onclick="navSwitch('#liuyan-page')">留言</li>
					<li id="about-page" onclick="navSwitch('#about-page')">关于</li>
					<li id="lianxi-page" onclick="navSwitch('#lianxi-page')">联系我</li>
				</ul>
			</nav><!-- 页头导航  -->
			<!-- <embed src="res/Pianoboy-Annabelle.mp3" hidden="true" autostart="true" loop="1" volume="10"> -->
			<div id="banner">
				<div class="inner">
					<h1 id="sss">枯黄的树叶</h1>
					<p class="sub-heading">Everything will be fine, you just need to wait.</p>
					<!-- <button id="main-btn">More about me</button> -->
					<a href="impress/index.html">
						<img class="photo" src="res/leaf.jpg" alt="">
					</a>
					<!-- <div id="main-btn">more about me.</div> -->
					<div class="more" onclick="moveToAnchor('.content');">
						<p class="more-txt">更多</p>
						<br>
						<span class="fa fa-arrow-down fa-lg"></span>
					</div>
				</div>
			</div>
		</header>
		<div class="content">
			<section class="green-section">
				<div class="wrapper">
					<div>
						<h2>memory</h2>
						<div class="hr"></div>
						<p class="sub-heading">the best revenge is not hatred, but the unconcern from the bottom of heart. why bother to hate someone irrelevant?</p>
					</div>
					<div class="icon-group">
						<span class="icon">
							<span class="fa fa-diamond fa-lg"></span>
						</span>
						<span class="icon">
							<span class="fa fa-futbol-o fa-lg"></span>
						</span>
						<span class="icon">
							<span class="fa fa-gamepad fa-lg"></span>
						</span>
					</div>
				</div>
			</section>
			<section class="gray-section">
				<div class="article-preview clearfix">
					<div class="img-section">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="text-section">
						<h2>hobby</h2>
						<div class="sub-heading">just boring life.</div>
						<p>i don`t love something, life is so boring, i can`t do my Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque libero impedit tenetur. Aut distinctio, maiores placeat similique quidem quaerat nisi maxime vero praesentium voluptate quam aspernatur! Sunt a, libero mollitia!</p>
					</div>
				</div>
				<div class="article-preview clearfix">
					<div class="text-section">
						<h2>waitting</h2>
						<div class="sub-heading">i`m thinking...</div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, dignissimos totam cum odit vero inventore nam maiores numquam minima, mollitia corporis tempore? Tempora inventore ducimus possimus et, harum quam eaque!</p>
					</div>
					<div class="img-section">
						<img src="img/2.jpg" alt="">
					</div>
				</div>
				<div class="article-preview clearfix">
					<div class="img-section">
						<img src="img/4.jpg" alt="">
					</div>
					<div class="text-section">
						<h2>waitting</h2>
						<div class="sub-heading">i`m thinking...</div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, dignissimos totam cum odit vero inventore nam maiores numquam minima, mollitia corporis tempore? Tempora inventore ducimus possimus et, harum quam eaque!</p>
					</div>
				</div>
			</section>
			<section class="purple-section">
				<div class="wrapper">
				 	<div class="heading-wrapper">
				 	<h2>plan</h2>
				 	<div class="hr"></div>
				 	<div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis similique distinctio doloribus magni eum culpa esse explicabo amet quae earum quidem blanditiis nisi delectus tempora iste, nulla! Ipsa, minima delectus!</div>
				 </div>
				 <div class="card-group clearfix">
				 	<div class="card">
				 		<h3>plan1 on 2016.2.9</h3>
				 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore quaerat sunt quis debitis! Maiores ab quos nulla perspiciatis ad nobis, inventore maxime aperiam quisquam, in quasi reprehenderit, commodi ipsa.</p>
				 	</div>
				 	<div class="card">
				 		<h3>plan2 on 2016.2.9</h3>
				 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore quaerat sunt quis debitis! Maiores ab quos nulla perspiciatis ad nobis, inventore maxime aperiam quisquam, in quasi reprehenderit, commodi ipsa.</p>
				 	</div>
				 	<div class="card">
				 		<h3>plan3 on 2016.2.9</h3>
				 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore quaerat sunt quis debitis! Maiores ab quos nulla perspiciatis ad nobis, inventore maxime aperiam quisquam, in quasi reprehenderit, commodi ipsa.</p>
				 	</div>
				 	<div class="card">
				 		<h3>plan4 on 2016.2.9</h3>
				 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore quaerat sunt quis debitis! Maiores ab quos nulla perspiciatis ad nobis, inventore maxime aperiam quisquam, in quasi reprehenderit, commodi ipsa.</p>
				 	</div>
				 	<div class="card">
				 		<h3>plan5 on 2016.2.9</h3>
				 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore quaerat sunt quis debitis! Maiores ab quos nulla perspiciatis ad nobis, inventore maxime aperiam quisquam, in quasi reprehenderit, commodi ipsa.</p>
				 	</div>
				 	<div class="card">
				 		<h3>plan6 on 2016.2.9</h3>
				 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore quaerat sunt quis debitis! Maiores ab quos nulla perspiciatis ad nobis, inventore maxime aperiam quisquam, in quasi reprehenderit, commodi ipsa.</p>
				 	</div>
				 </div>	
				</div>
			</section>
		</div>
		<footer>
			<ul class="share-group">
				<li>
					<a href="">
						<span class="fa fa-github fa-lg"></span>
						<!-- <img src="img/GitHub.svg" alt=""> -->
					</a>
				</li>
				<li>
					<a href="">
						<span class="fa fa-weibo fa-lg"></span>
						<!-- <img src="img/Twitter.svg" alt=""> -->
					</a>
				</li>
				<li>
					<a href="">
						<span class="fa fa-qq fa-lg"></span>
						<!-- <img src="img/QQ.svg" alt=""> -->
					</a>
				</li>
				<li>
					<a href="">
						<span class="fa fa-weixin fa-lg"></span>
						<!-- <img src="img/wechat.svg" alt=""> -->
					</a>
				</li>
				<li>
					<a href="mailto:dzscz_123@126.com">
						<span class="fa fa-envelope-o fa-lg"></span>
						<!-- <img src="img/mail.svg" alt=""> -->
					</a>
				</li>
			</ul>
			<div class="copy">
				<i class="fa fa-copyright"></i> Chazshi-2016
			</div>
		</footer><!-- 页脚  -->
		<div class="toolbar">
			<ul>
				<li>
					<a onclick="moveToAnchor('#banner');">
						<img src="img/br_up_48.png" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:void(0);" onclick="addFavorite('Shi`s Blog',location.href)">
						<img src="img/bookmark_2_48.png" alt="">
					</a>
				</li>
				<li>
					<a>
						<img src="img/music_square_48.png" alt="">
					</a>
				</li>
			</ul>
		</div>
		<div class="mask">
			<div class="wrapper">
				<!-- <img src="img/luckyStar.jpg" alt=""> -->
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At iure, et nemo rerum necessitatibus quas alias ipsam omnis modi. Impedit non magni vel nostrum? Error aut, molestias nisi autem officiis.</p>
			</div>
		</div>
	</div>
	
</body>
</html>